<template>
    <div class="wrapper">
        <div class="tabs">
            <div :class="`tabsItem ${active=='热卖中'?'active':'none'}` " @click="selectTabs('热卖中')">热卖中</div>
            <div :class="`tabsItem ${active=='新品'?'active':'none'}`" @click="selectTabs('新品')">新品</div>
        </div>
        <mt-tab-container v-model="active">
            <mt-tab-container-item id="热卖中">
                <HomeBestSalesScrollList></HomeBestSalesScrollList>
            </mt-tab-container-item>
            <mt-tab-container-item id="新品">
                <NewScrollList></NewScrollList>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>
<script>
    var HomeBestSalesScrollList = () => import( './home_bestSales_scrollList')
    import withStore from "../../../vuex/withStore";

    var NewScrollList = () => import( './new_scrollList')

    export default withStore({
        components: {
            HomeBestSalesScrollList, NewScrollList
        },
        methods: {
            selectTabs(e) {
                this.active = e
                this.setStore("app.tabActive", e)
            }
        },
        data() {
            return {
                active: this.getStore("app.tabActive")
            }
        }
    })
</script>
<style lang="less" scoped>
    .wrapper {
        padding-top: 5px;
        .tabs {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            margin-bottom: 10px;
            .tabsItem {
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                width: px2rem(150);
                height: px2rem(60);
                border-bottom: 2px solid #eee;
                margin-right: 10px;
                &.active {
                    border-bottom: 2px solid orangered;
                }
            }
        }
    }
</style>